<template>
  <view class="h5-container">
    <web-view 
      :src="h5PageUrl" 
      class="webview" 
      @message="handleMessage"
    />
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { onMounted, ref } from 'vue'

definePageConfig({
  navigationBarTitleText: '用户须知',
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black'
});

const h5PageUrl = ref('')

// Handle messages from H5 page
const handleMessage = (event: any) => {
  const messageData = event.detail.data
  
  if (messageData && messageData.length > 0) {
    const data = messageData[0]
    
    if (data.type === 'user_message') {
      Taro.showToast({
        title: `Received: ${data.message}`,
        icon: 'none',
        duration: 3000
      })
    }
  }
}

onMounted(() => {
  const params = Taro.getCurrentInstance().router?.params
  if (params?.url) {
    h5PageUrl.value = decodeURIComponent(params.url)
  }
})
</script>

<style>
.h5-container {
  width: 100%;
  height: 100vh;
}

.webview {
  width: 100%;
  height: 100%;
}
</style> 